<template>
  <el-dialog
      custom-class="newdialog"
      :model-value="queryDialogVisible"
      center
      fullscreen
      destroy-on-close
      :lock-scroll="false"
      @close="handleClose"
  >
    <template #title>
      <span class="coachtitle">教练详情</span>
    </template>
    <div class="coachheader">
      <div>
        <el-avatar :size="120" shape="square" :src="coachlist.img">
          <img src="https://img0.baidu.com/it/u=1799451268,1283400252&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300" alt=""/>
        </el-avatar>
      </div>
      <div class="coachheader_infor">
        <div class="coachitem">
          <span class="quantity"> 教练号 </span>
          <span class="coachtext"> {{props.initinforlist.id}} </span>
        </div>
        <div class="coachitem">
          <span class="quantity"> 姓名 </span>
          <span class="coachtext"> {{props.initinforlist.name}} </span>
        </div>
        <div class="coachitem">
          <span class="quantity"> 性别 </span>
          <span class="coachtext"> {{props.initinforlist.sex}} </span>
        </div>
        <div class="coachitem">
          <span class="quantity"> 年龄 </span>
          <span class="coachtext"> {{props.initinforlist.age}} </span>
        </div>
        <div class="coachitem">
          <span class="quantity"> 手机号 </span>
          <span class="coachtext"> {{props.initinforlist.mobile}} </span>
        </div>
        <div class="coachitem">
          <span class="quantity"> 负责场地 </span>
          <span class="coachtext"> {{props.initinforlist.place}} </span>
        </div>
        <div class="coachitem">
          <span class="quantity"> 负责科目 </span>
          <span class="coachtext"> {{props.initinforlist.subject}} </span>
        </div>
        <div class="coachitem">
          <span class="quantity"> 入职时间 </span>
          <span class="coachtext"> {{props.initinforlist.date}} </span>
        </div>
      </div>
      <div>
        <div class="coachitem" style="height: 100%;background: #c7c7ff;">
          <el-icon :size="40" style="margin-bottom: 7px"><Medal /></el-icon>
          <span v-if="coachlist.grade" class="quantity" style="color: white;font-size: 25px;font-weight: 600;"> {{coachlist.grade}}</span>
          <span v-else class="quantity" style="color: white;font-size: 25px;font-weight: 600;"> 0 </span>
          <span class="coachtext" style="color: rgba(149,149,255,1)"> evaluation </span>
        </div>
      </div>
    </div>
    <el-divider>
      <el-icon><StarFilled /></el-icon>
    </el-divider>
    <div>
      <div style="font-size: 20px;font-weight: 600;margin-bottom: 10px;">用户评价</div>
      <ul class="evalutionul">
        <li v-for="(item,index) in evaluationlist" :key="index">
          <div class="evalauid">
            <span v-if="item.faceless === '0'">{{item.userId}}</span>
            <span v-else>匿名用户</span>
          </div>
          <div class="evalaucontain">{{item.content}}</div>
          <div class="evaluaeva">
            <div>
              <el-rate
                  v-model="item.grade"
                  disabled
              />
            </div>
            <div>{{item.date}}</div>
          </div>
          <el-divider></el-divider>
        </li>
      </ul>
    </div>
      <div class="qt_bott">
        <button class="qt_bott_but" v-if="!props.initLoginTeaId" @click="submitYY('0')"> 选择 </button>
        <button class="qt_bott_but1" v-else-if="props.initLoginTeaId === props.initinforlist.id" @click="submitYY('1')"> 已选择 </button>
        <button class="qt_bott_but" v-else @click="submitYY('2')"> 更换 </button>
      </div>
  </el-dialog>
</template>

<script setup>
import {Medal,StarFilled} from '@element-plus/icons-vue'
import {ref} from "vue";
import {useStore} from "vuex";
import {getStudentById, UpdateStudent} from "@/api/student";
import {ElMessage} from "element-plus";
const store = useStore()
const LoginId = store.getters.Id

const props = defineProps({
  initinforlist:{
    type:Object,
    default:() => {}
  },
  initLoginTeaId:{
    type:String,
    default:() => ''
  },
  initevaluations:{
    type:Object,
    default:() => {}
  }
})
console.log(props.initLoginTeaId)

const evaluationlist = ref({})
const coachlist = ref({})
const coachid = ref(null)
coachlist.value = props.initinforlist
evaluationlist.value = props.initevaluations



const Emits = defineEmits(['update:modelValue'])

const handleClose = () =>{
  Emits('update:modelValue',false)
}
const submitYY = async (select) =>{
  if (select === '0'){
    await UpdateStudent({userId:LoginId,coachId:coachlist.value.id}).then(res=>{
      if (res.code === 20031){
        ElMessage.success('选择成功')
      }else {
        ElMessage.error('选择失败')
      }
    })
    handleClose()
  }else if(select === '1'){
    ElMessage.info('不可重复选择')
  }else {
    await UpdateStudent({userId:LoginId,coachId:coachlist.value.id}).then(res=>{
      if (res.code === 20031){
        ElMessage.success('更换成功')
      }else {
        ElMessage.error('更换失败')
      }
    })
    handleClose()
  }
}
</script>

<style>
/**{*/
/*  border: 1px solid blue;*/
/*}*/
.qt_bott{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%,0);
}

.dialog-footer button:first-child {
}

.el-dialog.is-fullscreen.el-dialog--center.newdialog {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin-top: 0;
  min-width: 860px !important;
}
.el-dialog.is-fullscreen.el-dialog--center.newdialog>.el-dialog__body{
  height: auto;
  padding: 0 20px;
  /*border: 1px solid blue;*/
}



.coachtitle{
  font-size: 28px;
  font-family: 华文楷体, serif;
}
.coachheader{
  display: flex;
  padding: 10px;
  max-height: 140px;
}
.coachheader_infor{
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.evalutionul{
  list-style-type: none;
  padding: 10px;
  /*border: 1px solid red;*/
}
.evalutionul li{
  /*border: 1px solid blue;*/
}
.evalauid{
  font-size: small;
  color: #8d9394;
  /*border: 1px solid blue;*/
}
.evalauid>span{
  background-color: #74b4ff;
  padding: 2px 4px;
  color: white;
  border-radius: 4px;
  border: 1px solid #aaaaff;
}
.evalaucontain{
  font-size: 20px;
  color: black;
  box-sizing: border-box;
  padding: 10px 0;
}
.evaluaeva{
  display: flex;
  justify-content: space-between;
  color: #8d9394;
}



/* From uiverse.io by @alexmaracinaru */
.coachitem {
  border-radius: 10px;
  width: 100px;
  height: 40px;
  display: flex;
  margin: 10px;
  background-color: rgb(91, 142, 255,0.8);
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.coachitem:hover {
  transform: scale(0.95);
  transition: all 0.3s;
}

.quantity {
  color: #0032ff;
  font-size: 14px;
  font-weight: 500;
}
.coachtext {
  color: white;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
}

/* From uiverse.io by @arieshiphop */
.qt_bott_but{
  font-size: 17px;
  padding: 0.5em 2em;
  border: transparent;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  background: dodgerblue;
  color: white;
  border-radius: 4px;
}

.qt_bott_but:hover {
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%);
}

.qt_bott_but:active {
  transform: translate(0em, 0.2em);
}
.qt_bott_but1{
  font-size: 17px;
  padding: 0.5em 2em;
  border: transparent;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  background: #565656;
  color: white;
  border-radius: 4px;
}

.qt_bott_but1:hover {
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgb(69, 71, 72) 100%,rgb(97, 123, 148) 0%);
}

.qt_bott_but1:active {
  transform: translate(0em, 0.2em);
}
</style>